<template>
  <div class="content" style="margin: 20px;">
    <el-tabs type="border-card" v-model="active">
      <el-tab-pane label="损益表" class="echart_box" name="first">
        <el-table
          :data="reportData"
          style="width: 100%;"
          border
          row-key="id"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" :label="time"  width="360">
            <template slot-scope="scope">
              {{scope.row.name}}<span style="margin-left:5px;color: #1c84c6;font-size: 13px;">{{scope.row.money}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="month1" label="1月" />
          <el-table-column prop="month2" label="2月" />
          <el-table-column prop="month3" label="3月" />
          <el-table-column prop="month4" label="4月" />
          <el-table-column prop="month5" label="5月" />
          <el-table-column prop="month6" label="6月" />
          <el-table-column prop="month7" label="7月" />
          <el-table-column prop="month8" label="8月" />
          <el-table-column prop="month9" label="9月" />
          <el-table-column prop="month10" label="10月" />
          <el-table-column prop="month11" label="11月" />
          <el-table-column prop="month12" label="12月" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="金流收支表" name="second">
        <el-row style="width: 100%;">
          <div style="height: 60px;display: flex;align-items: center;">
            <div class="top_filter">
              <div class="top_filter_col">
                <span class="top_filter_col_tit">时间区间</span>
                <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="-"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                start-placeholder="开始日期" end-placeholder="结束日期" @input="TimeSelect()" :picker-options="pickerOptions">
                </el-date-picker>
              </div>
              <div class="top_filter_col">
                <span class="top_filter_col_tit">币种</span>
                <el-select v-model="currency" @input="getAccount" disabled  placeholder="请选择">
                  <el-option v-for="item in currencyList"  :key="item.cid" :label="item.cnName" :value="item.cid">
                    <span style="float: left">{{ item.cnName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.enName }}</span>
                  </el-option>
                </el-select>
              </div>
              <div class="top_filter_col">
                <el-button size="small" type="primary" @click="getAccount">刷新</el-button>
              </div>
            </div>
          </div>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <el-row style="margin-bottom: 30px;">
                  <el-container style="width: 300px;height: 100%;border:1px solid  #d4d2d2">
                    <el-header @click.native="DJ()" style="background-color: #708090;font-size: 17px;color: #ffffff;">
                      <span style="float: left;">
                        现金类
                      </span>
                      <span style="float: right;">
                        $ <countTo ref="junb1" :endVal="cunt.xjbalance" autoplay duration='500'></countTo>
                      </span>
                    </el-header>
                    <el-main v-if="dj" style="background-color: #ffffff;margin: 5px;padding: 0px;" v-for="i in xjList">
                      <el-row>
                        <el-col style="float: left;width: 35%;text-align: center;color: #1c84c6">
                          <span>{{i.account}}</span>
                        </el-col>
                        <el-col style="float: right;width: 35%;text-align: center">
                          <span> $ <countTo ref="junb1" :endVal="i.balance" autoplay duration='500'></countTo></span>
                        </el-col>
                      </el-row>
                    </el-main>
                  </el-container>
                </el-row>
                <el-row style="margin-bottom: 30px;">
                  <el-container style="width: 300px;height: 100%;border:1px solid  #d4d2d2">
                    <el-header @click.native="DJ()" style="background-color: #708090;font-size: 17px;color: #ffffff;">
                      <span style="float: left;">
                        银行存款类
                      </span>
                      <span style="float: right;">
                         $ <countTo ref="junb1" :endVal="cunt.yhkbalance" autoplay duration='500'></countTo>
                      </span>
                    </el-header>
                      <el-main v-if="dj" style="background-color: #ffffff;margin: 5px;padding: 0px;" v-for="i in yhkList">
                      <el-row>
                        <el-col style="float: left;width: 35%;text-align: center;color: #1c84c6">
                          <span>{{i.account}}</span>
                        </el-col>
                        <el-col style="float: right;width: 35%;text-align: center">
                          <span> $ <countTo ref="junb1" :endVal="i.balance" autoplay duration='500'></countTo></span>
                        </el-col>
                      </el-row>
                    </el-main>
                  </el-container>
                </el-row>
                <el-row style="margin-bottom: 30px;">
                  <el-container style="width: 300px;height: 100%;border:1px solid  #d4d2d2">
                    <el-header @click.native="DJ()" style="background-color: #708090;font-size: 17px;color: #ffffff;">
                      <span style="float: left;">
                        信用卡类
                      </span>
                      <span style="float: right;">
                          $ <countTo ref="junb1" :endVal="cunt.yykbalance" autoplay duration='500'></countTo>
                      </span>
                    </el-header>
                    <el-main v-if="dj" style="background-color: #ffffff;margin: 5px;padding: 0px;" v-for="i in yykList">
                      <el-row>
                        <el-col style="float: left;width: 35%;text-align: center;color: #1c84c6">
                          <span>{{i.account}}</span>
                        </el-col>
                        <el-col style="float: right;width: 35%;text-align: center">
                          <span> $ <countTo ref="junb1" :endVal="i.balance" autoplay duration='500'></countTo></span>
                        </el-col>
                      </el-row>
                    </el-main>
                  </el-container>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-container style="width: 300px;">
                  <el-header style="background-color: #ffffff;font-size: 60px;">+</el-header>
                  <div style="width:300px;height: 80px;background-color: #4682b4;font-size: 17px;color: #ffffff;border-radius: 5px;">
                      <span style="line-height: 80px; float: left;margin-left: 13px;">
                        金流流入
                      </span>
                    <span style="line-height: 80px; float: right;margin-right: 13px;">
                        $ <countTo ref="junb1" :endVal="Jincome" autoplay duration='500'></countTo>
                      </span>
                  </div>
                </el-container>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <el-container style="width: 300px;">
                  <el-header style="background-color: #ffffff;font-size: 60px;">-</el-header>
                  <div style="width:300px;height: 80px;background-color: #4682b4;font-size: 17px;color: #ffffff;border-radius: 5px;">
                      <span style="line-height: 80px; float: left;margin-left: 13px;">
                        金流流出
                      </span>
                      <span style="line-height: 80px; float: right;margin-right: 13px;" >
                       $ <countTo ref="junb2" :endVal="Jdisbures" autoplay duration='500'></countTo>
                      </span>
                  </div>
                </el-container>
              </el-col>
              <el-col :span="12">
                <el-row style="margin-bottom: 30px;">
                  <el-container style="width: 300px;height: 100%;border:1px solid  #d4d2d2">
                    <el-header @click.native="DJ()" style="background-color: #708090;font-size: 17px;color: #ffffff;">
                      <span style="float: left;">
                        现金类
                      </span>
                      <span style="float: right;">
                          $ <countTo ref="junb1" :endVal="cunt.xjbalance" autoplay duration='500'></countTo>
                      </span>
                    </el-header>
                    <el-main v-if="dj" style="background-color: #ffffff;margin: 5px;padding: 0px;" v-for="i in xjList">
                      <el-row>
                        <el-col style="float: left;width: 35%;text-align: center;color: #1c84c6">
                          <span>{{i.account}}</span>
                        </el-col>
                        <el-col style="float: right;width: 35%;text-align: center">
                          <span> $ <countTo ref="junb1" :endVal="i.balance" autoplay duration='500'></countTo></span>
                        </el-col>
                      </el-row>
                    </el-main>
                  </el-container>
                </el-row>
                <el-row style="margin-bottom: 30px;">
                  <el-container style="width: 300px;height: 100%;border:1px solid  #d4d2d2">
                    <el-header @click.native="DJ()" style="background-color: #708090;font-size: 17px;color: #ffffff;">
                      <span style="float: left;">
                        银行存款类
                      </span>
                      <span style="float: right;">
                         $ <countTo ref="junb1" :endVal="cunt.yhkbalance" autoplay duration='500'></countTo>
                      </span>
                    </el-header>
                    <el-main v-if="dj" style="background-color: #ffffff;margin: 5px;padding: 0px;" v-for="i in yhkList">
                      <el-row>
                        <el-col style="float: left;width: 35%;text-align: center;color: #1c84c6">
                          <span>{{i.account}}</span>
                        </el-col>
                        <el-col style="float: right;width: 35%;text-align: center">
                          <span> $ <countTo ref="junb1" :endVal="i.balance" autoplay duration='500'></countTo></span>
                        </el-col>
                      </el-row>
                    </el-main>
                  </el-container>
                </el-row>
                <el-row style="margin-bottom: 30px;">
                  <el-container style="width: 300px;height: 100%;border:1px solid  #d4d2d2">
                    <el-header @click.native="DJ()" style="background-color: #708090;font-size: 17px;color: #ffffff;">
                      <span style="float: left;">
                        信用卡类
                      </span>
                      <span style="float: right;">
                         $ <countTo ref="junb1" :endVal="cunt.yykbalance" autoplay duration='500'></countTo>
                      </span>
                    </el-header>
                    <el-main v-if="dj" style="background-color: #ffffff;margin: 5px;padding: 0px;" v-for="i in yykList">
                      <el-row>
                        <el-col style="float: left;width: 35%;text-align: center;color: #1c84c6">
                          <span>{{i.account}}</span>
                        </el-col>
                        <el-col style="float: right;width: 35%;text-align: center">
                          <span> $ <countTo ref="junb1" :endVal="i.balance" autoplay duration='500'></countTo></span>
                        </el-col>
                      </el-row>
                    </el-main>
                  </el-container>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-tab-pane>
      <el-tab-pane label="财务状况表" name="third">
        <el-row style="width: 100%;">
          <div style="height: 60px;display: flex;align-items: center;">
            <a style="background-color: #67C23A;color: #ffffff " class="btn" @click="typeBtn('reason')" >原因</a>
            <span style="font-size: 25px;  padding: 4px 8px; ">< || ></span>
            <a style="background-color: #508eea;color: #ffffff " class="btn" @click="typeBtn('account')" >账户</a>
          </div>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>应收款</span>
              </div>
              <div class="numjumb_box">
                <countTo ref="junb3" :endVal="Yincome" autoplay duration='500'></countTo>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>应付款</span>
              </div>
              <div class="numjumb_box">
                <countTo ref="junb4" :endVal="Ydisbures" autoplay duration='500'></countTo>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import Chart from '@/components/Charts/MixChart'
  import {report,cashflow,status,reportList} from '@/api/system/report'
  import countTo from 'vue-count-to';
  import {listAccount,income} from '@/api/system/account'
  import {listCurrency} from '@/api/system/currency';
  import {listBalance,addBalance,updateBalance,getBalance} from '@/api/system/balance';
  import {updateSetting,listSetting,getSetting,addSetting,} from '@/api/system/setting';
  import { getInfo } from "@/api/login";
  export default {
    name: 'MixChart',
    components: {
      Chart,
      countTo
    },
    watch: {
      active(val) {
        if (val == "first") {
          this.$nextTick(() => {
            this.$refs.Chart.resize();
          })
        }else if(val == "second"){
          this.$refs.junb1.start()
          this.$refs.junb2.start()
          this.getAccount();
        }else if(val == "third"){
          this.$refs.junb3.start()
          this.$refs.junb4.start()
        }
      }
    },
    data() {
      return {
        dj:false,
        currencyList:null,
        type:"",
        junmbNum1:7867812,
        btnTxt:'原因/账户',
        active: 'first',
        EChart: null,
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: [],
        currency:null,
        Jincome:null,
        Jdisbures:null,
        time:null,
        report:null,
        profitRows:null,
        payRows:[],
        reportData:[],
        profitAndPayResult:{},
        profitAndPayResult2:{},
        profitAndPayResult3:{},
        profitAndPayResult4:{},
        Ydisbures:null,
        Yincome:null,
        xjList:[],
        yykList:[],
        yhkList:[],
        cunt:{xjbalance:0,yhkbalance:0,yykbalance:0},
      }
    },
    created(){
      let date = new Date();
      this.time= date.getFullYear()+'年损益表'; //获取完整的年份(4位)
      getInfo().then(data=>{
        report(data.tuser.ofCompany,date.getFullYear()).then(rep=>{
          this.reportData=rep
        })
      })

    },
    methods:{
      getAccount(){

        listCurrency().then(date=>{
          this.currencyList=date.rows;
          getInfo().then(rep=>{
            this.Jincome=0;
            this.Jdisbures=0;
            let date = new Date();
            this.value2=[date.getFullYear()+'-01-01',date.getFullYear()+'-'+(date.getMonth()+parseInt(1))+'-'+date.getDate()]
            let cw={};
            cw.start=this.value2[0];
            cw.end=this.value2[1];
            cw.ofCompany=rep.tuser.ofCompany;
            cashflow(cw).then(date=>{
              if(date.cashflow.incomeList==''){
                this.Jincome=0;
              }else {
                for (let i in date.cashflow.incomeList){
                  this.Jincome+=date.cashflow.incomeList[i].money;
                }
              }
              if(date.cashflow.payList==''){
                this.Jdisbures=0;
              }else {
                for (let i in date.cashflow.payList){
                  this.Jdisbures+=date.cashflow.payList[i].money;
                }
              }
            })
            getSetting({ofCompany:rep.tuser.ofCompany}).then(date=>{
              this.currency=date.data.mainCurrency;
              this.cunt={xjbalance:0,yhkbalance:0,yykbalance:0}
              let currency=date.data.mainCurrency;
              let account={};
              account.atype="现金";
              account.ofCompany=rep.tuser.ofCompany;
              listAccount(account).then(date=>{
                for(let i in date.rows){
                  let balance={}
                  balance.ofAccount=date.rows[i].aid;
                  balance.ofCurrency=currency;
                  listBalance(balance).then(data=>{
                    let xj = {}
                    xj.account = date.rows[i].aname;
                    if(data.rows==""){
                      xj.balance="0"
                    }else{
                      for(let j in data.rows) {
                        if (data.rows != "") {
                          xj.balance = data.rows[j].balance;
                        }
                      }
                    }

                    this.$set(this.xjList,i,xj);
                    this.$set(this.cunt,"xjbalance", parseFloat(this.cunt.xjbalance)+parseFloat(this.xjList[i].balance))
                    this.$forceUpdate()
                  })
                }

              })
              account.atype="银行存款";
              listAccount(account).then(date=>{
                for(let i in date.rows){
                  let balance={}
                  balance.ofAccount=date.rows[i].aid;
                  balance.ofCurrency=currency;
                  listBalance(balance).then(data=>{
                    let yhk = {}
                    yhk.account = date.rows[i].aname;
                    if(data.rows==""){
                      yhk.balance="0"
                    }else{
                      for(let j in data.rows) {
                        if (data.rows != "") {
                          yhk.balance = data.rows[j].balance;
                        }
                      }
                    }

                    this.$set(this.yhkList,i,yhk);
                    this.$set(this.cunt,"yhkbalance", parseFloat(this.cunt.yhkbalance)+parseFloat(this.yhkList[i].balance))
                    this.$forceUpdate()
                  })
                }
              })
              account.atype="信用卡";
              listAccount(account).then(date=>{
                for(let i in date.rows){
                  let balance={}
                  balance.ofAccount=date.rows[i].aid;
                  balance.ofCurrency=currency;
                  listBalance(balance).then(data=>{
                    let yyk = {}
                    yyk.account = date.rows[i].aname;
                    if(data.rows==""){
                      yyk.balance="0"
                    }else{
                      for(let j in data.rows) {
                        if (data.rows != "") {
                          yyk.balance = data.rows[j].balance;
                        }
                      }
                    }
                    this.$forceUpdate()
                    this.$set(this.yykList,i,yyk);
                    this.$set(this.cunt,"yykbalance", parseFloat(this.cunt.yykbalance)+parseFloat(this.yykList[i].balance))
                  })
                }
              })
            })
          })

        })

        this.$forceUpdate()
      },
      DJ(){
        this.dj = !this.dj;
      },
      time(){
        let date = new Date();
        date .getYear(); //获取当前年份(2位)

        date .getFullYear(); //获取完整的年份(4位)

        date .getMonth(); //获取当前月份(0-11,0代表1月)

        date .getDate(); //获取当前日(1-31)

        date .getDay(); //获取当前星期X(0-6,0代表星期天)

        date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数)

        date .getHours(); //获取当前小时数(0-23)

        date .getMinutes(); //获取当前分钟数(0-59)

        date .getSeconds(); //获取当前秒数(0-59)

        date .getMilliseconds(); //获取当前毫秒数(0-999)

        date .toLocaleDateString(); //获取当前日期

        var mytime=date .toLocaleTimeString(); //获取当前时间

        date .toLocaleString( ); //获取日期与时间
      },
      TimeSelect(){
        getInfo().then(rep=> {
          this.Jincome = 0;
          this.Jdisbures = 0;
          let cw = {};
          cw.start = this.value2[0];
          cw.end = this.value2[1];
          cw.ofCompany = rep.tuser.ofCompany;
          cashflow(cw).then(date => {
            if (date.cashflow.incomeList == '') {
              this.Jincome = 0;
            } else {
              for (let i in date.cashflow.incomeList) {
                this.Jincome += date.cashflow.incomeList[i].money;
              }
            }
            if (date.cashflow.payList == '') {
              this.Jdisbures = 0;
            } else {
              for (let i in date.cashflow.payList) {
                this.Jdisbures += date.cashflow.payList[i].money;
              }
            }
          })
        })
      },
      typeBtn(row){
        let sta={};
        sta.type=row;
        status(sta).then(date=>{
          if(date.form.type=='reason'){
            if(date.result.incomeResults==''){
              this.$message.success("没数据")
              this.Yincome=0;
            }else {
              for(let i in date.result.incomeResults){
                this.Yincome=parseFloat(this.Yincome)+parseFloat(date.result.incomeResults[i].money)
              }
              for(let i in date.result.payResults){
                this.Ydisbures=parseFloat(this.Ydisbures)+parseFloat(date.result.payResults[i].money)
              }
            }
          }else {
            if(date.result.incomeResults==''){
              this.$message.success("没数据")
              this.Yincome=0;
            }else {
              for(let i in date.result.incomeResults){
                this.Yincome=parseFloat(this.Yincome)+parseFloat(date.result.incomeResults[i].money)
              }
              for(let i in date.result.payResults){
                this.Ydisbures=parseFloat(this.Ydisbures)+parseFloat(date.result.payResults[i].money)
              }
            }
          }
        })
      },
      getAb(){
        this.$set(this.cunt,"xjbalance",0);
        this.$set(this.cunt,"yhkbalance",0);
        this.$set(this.cunt,"yykbalance",0);
          for(let i in this.xjList){

            this.$set(this.cunt,"xjbalance", parseFloat(this.cunt.xjbalance)+parseFloat(this.xjList[i].balance))
          }
          for(let i in this.yhkList){

            this.$set(this.cunt,"yhkbalance", parseFloat(this.cunt.yhkbalance)+parseFloat(this.yhkList[i].balance))
          }
          for(let i in this.yykList){
            this.$set(this.cunt,"yykbalance", parseFloat(this.cunt.yykbalance)+parseFloat(this.yykList[i].balance))
          }


        }
    }
  }
</script>

<style lang="scss">
  .pagination_box {
    height: 60px;
    width: 100%;
    background-color: #fff;
  }


  .top_filter {
    font-size: 15px;
    padding: 10px 20px;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    &_col {
      padding: 4px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 10px;

      &_tit {
        white-space: nowrap;
        margin: 8px;
      }
    }
  }
  .numjumb_box{
    font-size: 50px;
  }
  .echart_box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  .btn {
    width: 60px;
    height: 30px;
    font-size: 15px;
    text-align: center;
    padding: 4px 8px;
    color: white;
    border-radius: 4px;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
